<template>
  <BackGround />
  <div class="container">
    <div class="user-info">
      <div class="head-image">
        <el-avatar :size="60" class="headimage" fit="cover" :src="user.headImage" />
      </div>
      <div class="nick-name">
        <div class="name"> {{user.nickName}}</div>
        <div class="level"><span class="tulin tulin-VIP">{{vipLevel}}</span> </div>
      </div>
      <div class="rom-size">
        {{myRom}}
      </div>
    </div>
    <div class="have-vip">
      <div v-for=" vip in myVip" :key="vip.type">
        <el-tag :type="dateSubUtil(vip.expireTime,new Date())>0 ? 'info':'success'">
          <span v-if="vip.type=='白银会员'" class="tulin tulin-baiyinvip" />
          <span v-if="vip.type=='黄金会员'" class="tulin tulin-huangjinvip" />
          <span v-if="vip.type=='钻石会员'" class="tulin tulin-zuanshivip-copy" />
          <span v-if="vip.type=='永恒会员'" class="tulin tulin-maxvip" />
          {{vip.type}}:
          {{ dateFormatUtil(vip.expireTime)}}&nbsp;{{dateSubUtil(vip.expireTime,new Date())>0?"已到期":"未到期"}}
        </el-tag>
      </div>
    </div>
    <div class="vip-type">
      <div class="type-description">VIP类型<el-tooltip class="box-item" effect="dark" placement="top">
          <template #content>可拥有不同vip,<br />不同类型vip空间可叠加</template>
          <el-icon color="yellow">
            <Warning />
          </el-icon>
        </el-tooltip>
      </div>

      <div class="item" v-for="item in vipItem" :key="item.vipType" @click="changeVipType(item)">
        <el-card style="height:100%;width:100%" body-style="padding:0">
          ￥{{item.price.toFixed(2)}}
          <div>
            <span v-if="item.vipType=='白银会员'" class="tulin tulin-baiyinvip type-icon"></span>
            <span v-if="item.vipType=='黄金会员'" class="tulin tulin-huangjinvip type-icon"></span>
            <span v-if="item.vipType=='钻石会员'" class="tulin tulin-zuanshivip-copy type-icon"></span>
            <span v-if="item.vipType=='永恒会员'" class="tulin tulin-maxvip type-icon"></span>
          </div>
          <div>{{item.rom}}</div>
        </el-card>
        <el-radio v-model="vipType" :label="item.vipType"></el-radio>
      </div>

    </div>
    <div class="bottom">
      <div class="good-num" v-show="!isLoading">
        <el-input-number v-model="goodNum" @change="handleChange" :disabled="isMax" size="mini"
          :min="1" :max="99" label="月">
        </el-input-number>
      </div>
      <div class="price-total">合计：￥{{totalPrice.toFixed(2)}}</div>
      <div class="submit-btn">
        <el-button :disabled="havaMyMax" @click="submit" :loading="isLoading" style="width:100%"
          type="danger" size="large" round>
          {{purchaseText}}
        </el-button>
      </div>
    </div>
  </div>
  <el-dialog v-model="purchaseDialog" title="充值" :center="true" @closed="isLoading=false">
    <div @click="purchase">
      <el-image style="width:100%;height:100%" :src="qrCode.code" fit="fill">
      </el-image>
    </div>
  </el-dialog>
</template>

<script>
import { dateFormat, sizeFormat, dateSub } from '../../utils/index';
import BackGround from '../../components/BackGround.vue';
import { ElMessage } from 'element-plus';
export default {
  name: 'GVip',
  data () {
    return {
      vipType: "白银会员",
      goodNum: 1,
      isMax: false,
      vipItem: {
      },
      price: 9.00,
      totalPrice: 9.00,
      isLoading: false,
      myVip: null,
      vipLevel: 0,
      myRom: 0,
      user: {},
      purchaseDialog: false,
      qrCode: "",
      purchaseText: "立即购买",
      havaMyMax: false,
    }
  },
  comments: {
    BackGround,
  },
  mounted () {
    this.getUserVo();
    this.getVipItem();
    this.getMyVip();
    this.getMyRom();
  },
  methods: {
    getVipItem () {
      this.$axios.get("/vip/vipitem").then(res => {
        if (res.flag) {
          this.vipItem = res.data;
        }
      })
    },
    getMyVip () {
      this.$axios("/vip").then(res => {
        if (res.flag) {
          this.myVip = res.data;
          for (var key in res.data) {
            this.vipLevel += res.data[key].level;
          }
        }
      })
    },
    getMyRom () {
      this.$axios.get("/rom/myrom").then(res => {
        if (res.flag) {
          this.myRom = sizeFormat(res.data);
        }
      })
    },
    getUserVo () {
      this.$axios("/user/uservo").then(res => {
        if (res.flag) {
          if (res.data.nickName.length > 5) {
            res.data.nickName = res.data.nickName.substring(0, 5) + "..."
          }
          this.user = res.data;
        }
      })
    },
    changeVipType (item) {
      this.vipType = item.vipType;
      this.goodNum = 1;
      this.price = item.price;
      this.totalPrice = item.price;
    },
    //生成订单二维吗
    getQrcode () {
      this.$axios.get("/vip/code").then(res => {
        if (res.flag) {
          this.qrCode = res.data;
        }
      })
    },
    //充值购买
    purchase () {
      var forms = new FormData();
      forms.append("vipType", this.vipType);
      forms.append("num", this.goodNum);
      forms.append("orderId", this.qrCode.orderId);
      this.$axios({
        method: 'post',
        url: '/vip/purchase',
        data: forms,
      }).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          });
          this.$router.go(0);
        }
      })
    },
    submit () {
      this.isLoading = true;
      this.purchaseDialog = true;
      //生成订单二维吗
      this.getQrcode();
    },
    handleChange () {
      this.totalPrice = this.price * this.goodNum;
    },
    dateFormatUtil (date) {
      return dateFormat(date, 3);
    },
    dateSubUtil (oldDate, newDate) {
      return dateSub(oldDate, newDate, 1);
    }
  },
  watch: {
    vipType (e) {
      this.goodNum = 1;
      this.purchaseText = "立即购买";
      this.havaMyMax = false;
      for (var key in this.myVip) {
        if (this.myVip[key].type == e) {
          this.purchaseText = "续费";
          if (e == "永恒会员") {
            this.purchaseText = "已拥有";
            this.havaMyMax = true;
          }
        }
      }
      if (e == "永恒会员") {
        this.isMax = true;
      } else {
        this.isMax = false;
      }
    }
  }
}
</script>

<style scoped>
.user-info {
  border-radius: 10px;
  float: left;
  margin-top: 20px;
  margin-left: 5%;
  width: 90%;
  height: 80px;
  background: linear-gradient(to bottom right, white, yellow);
  margin-bottom: 20px;
}
.head-image {
  float: left;

  margin-top: 10px;
  margin-left: 10px;
  height: 80px;
}
.nick-name {
  float: left;
  width: 30%;
  margin-top: 10px;
  height: 60px;
}
.nick-name > .name {
  line-height: 30px;
  height: 30px;
}
.nick-name > .level {
  height: 30px;
  line-height: 30px;
}
.tulin {
  font-size: 14px;
}
.tulin-VIP {
  font-size: 20px;
}
.rom-size {
  float: right;
  height: 100%;
  font-size: 25px;
  line-height: 80px;
  margin-right: 10px;
}
.have-vip {
  width: 100%;
  float: left;
  margin-left: 20px;
}
.have-vip > div {
  margin-top: 4px;
}
.tulin-maxvip {
  font-size: 16px;
}
.vip-type {
  width: 100%;
  float: left;
}
.type-description {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.vip-type > .item {
  margin-top: 5px;
  text-align: center;
  float: left;
  width: calc(25% - 7px);
  height: 100px;
  margin-left: 5px;
}
.type-icon {
  display: block;
  font-size: 50px;
}
.bottom {
  bottom: 0;
  position: fixed;
  float: left;
  width: 100%;
  height: 60px;
  background-color: var(--primary);
}
.price-total {
  position: absolute;
  left: 10px;
  top: 15px;
  color: var(--el-color-danger);
  font-size: 20px;
}
.submit-btn {
  position: absolute;
  width: 150px;
  right: 10px;
  top: 10px;
}
.good-num {
  position: absolute;
  top: -40px;
  right: 10px;
}
.good-num1 {
  position: absolute;
  top: -40px;
  left: 10px;
}
</style>